<template>
	<view class="store-box">
		<view class="top-placeholder"></view>
		<!-- 店铺名 -->
		<view class="store-info">
			<view class="stroe">
				<view class="info">
					<view class="name">
						{{shopInfo.name}}
					</view>
					<view class="introfuce">
						{{shopInfo.instruction}}
					</view>
				</view>
				<view class="img-box">
					<image :src="shopInfo.avatar" class="img"></image>
				</view>
			</view>
			<view class="notice">
				<u-notice-bar :text="text" speed="100" url="" color="black" bgColor="white"></u-notice-bar>
			</view>
		</view>
		<!-- tabs -->
		<view class="tabs">
			<u-tabs :list="list1" @click="changeIndex"></u-tabs>
			<!-- 商品列表 -->
			<view class="scroll-view-container" v-if="current == 0">
				<!-- 左侧的滚动视图区域 -->
				<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
					<view :class="['left-scroll-view-item', item.id == active ? 'active' : '' ]"
						v-for="(item, index) in shopInfo.categoryList" :key="item.id"
						@click="changeScrollIndex(item.id)">{{item.name}}</view>
				</scroll-view>
				<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
					<view class="right-scroll-view-item" v-for="(item, index) in dishList" :key="item.id">
						<view class="img-box">
							<image :src="item.picture" class="img"></image>
						</view>
						<view class="goods-info">
							<view class="name"> {{item.name}} </view>
							<view class="bottom">
								<view class="price">￥{{item.price}}</view>
								<!-- 选择菜品区域 -->
								<view class="number">
								<!-- 	<view class="plus" v-if="value1 == 0" @click="showNumBox">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view> -->
									<u-number-box v-model="item.deleted" :min="0" :max="99" v-if="item.specificationList.length < 1" :name="item.id" @change="changeNum(item)">
										<view slot="minus" class="minus" >
											<u-icon name="minus" size="12"></u-icon>
										</view>
										<text slot="input" style="margin: 0 -20px; width: 50px;text-align: center;"
											class="input" >{{item.deleted}}</text>
										<view slot="plus" class="plus" >
											<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
										</view>
									</u-number-box>
									<view class="choose" v-else>
										<view class="mode" @click="showChoice(item)">选规格</view>
										<u-badge numberType="limit" type="warning" max="99" :value="item.deleted" class="position"></u-badge>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<!-- 选规格 -->
				<u-popup :show="choice" mode="bottom" class="showChoice-box">
					<view class="showChoice">
						<view class="chosed">已选：大份+微辣 
						<u-icon name="close-circle" size="20" @click="choice = false"></u-icon>
						</view>
						<view class="introduction">
							<view class="img-box">
								<image :src="choiceInfo.picture" class="img"></image>
							</view>
							<view class="name-price">
								<view class="name">{{choiceInfo.name}}</view>
								<view class="price">￥{{choiceInfo.price}}</view>
							</view>
						</view>
						
						<view class="degree-box">
							<view class="degree">辣度</view>
							<view class="degree-choice">
								<u-tag v-for="(item, index) in degree" :key="index" shape="circle" :text="item.chili" :plain="!item.checked" type="primary" :name="index" @click="radioClick"></u-tag>
							
							</view>
						</view>
						<view class="weight-box">
							<view class="weight">分量</view>
							<view class="weight-choice">
								<u-tag v-for="(item, index) in weightList" :key="index" shape="circle" :text="item.weight" :plain="!item.checked" type="primary" :name="index" @click="radioClick1"></u-tag>
							</view>
						</view>
						
						<view class="numbox">
							<view class="num">数量</view>
							<u-number-box v-model="choiceInfo.deleted" :min="0">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="margin: 0 -20px; width: 50px;text-align: center;"
									class="input">{{choiceInfo.deleted}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" max="99"  color="#FFFFFF" size="12" ></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</u-popup>
				
				<!-- 购物车 -->
				<view class="pay-info">
					<view class="total-price">
						<u-icon name="bag" color="white" size="40"></u-icon>
						配送费2元
					</view>
					<view url="/subpkg/submit/submit" class="pay black">
						12元起送
					</view>
				</view>
				<view class="pay-info">
					<view class="total-price">
						<u-icon name="bag" color="white" size="40" @click="show = true"></u-icon>
						<u-badge :type="type" max="99" min="0" :value="value1" class="badge" @click="show = true"></u-badge>
						共30元
					</view>
					<navigator url="/subpkg/submit/submit" class="pay">
						结算
					</navigator>
				</view>

				
				
				
				<!-- 弹出购物车 -->
				<!-- @close="close" @open="open" -->
				<u-popup :show="show" mode="bottom" class="popup">
					<view class="popup-box">
						<view class="popup-top">
							<view class="already">已选商品</view>
							<view class="right">
								<u-icon name="trash"></u-icon>
								<text @click="show = false">清空购物车</text>
							</view>
						</view>
						<view class="popup-dish-item">
							<view class="img-box">
								<image src="/static/logo/logo.webp" class="img"></image>
							</view>
							<view class="popup-right">
								<view class="name">意大利面</view>
								<view class="choice">大份/小份</view>
								<view class="price-box">
									<view class="price">￥17</view>
									<view class="add">
										<u-number-box v-model="value1" :min="0" :max="99">
											<view slot="minus" class="minus">
												<u-icon name="minus" size="12"></u-icon>
											</view>
											<text slot="input" style="margin: 0 -20px; width: 50px;text-align: center;"
												class="input">{{value1}}</text>
											<view slot="plus" class="plus">
												<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
											</view>
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="popup-dish-item">
							<view class="img-box">
								<image src="/static/logo/logo.webp" class="img"></image>
							</view>
							<view class="popup-right">
								<view class="name">意大利面</view>
								<view class="choice">大份/小份</view>
								<view class="price-box">
									<view class="price">￥17</view>
									<view class="add">
										<u-number-box v-model="value1" :min="0" :max="99">
											<view slot="minus" class="minus">
												<u-icon name="minus" size="12"></u-icon>
											</view>
											<text slot="input" style="margin: 0 -20px; width: 50px;text-align: center;"
												class="input">{{value1}}</text>
											<view slot="plus" class="plus">
												<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
											</view>
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>

			<view class="comments-box" v-if="current == 1">
				<view class="score-box">
					<view class="score-left">
						<view class="score">
							{{shopInfo.score}}
						</view>
						<view class="star-box">
							<u-rate :value="shopInfo.score" readonly></u-rate>
							<view class="discription">商品质量，共多少人点评</view>
						</view>
					</view>
					<view class="distribution">
						<view class="score2">{{shopInfo.score}}</view>
						<view class="serve">配送服务</view>
					</view>
				</view>
				<view class="tag-box">
					<u-tag text="标签" shape="circle" size="mini"></u-tag>
					<u-tag text="标签" plain shape="circle" size="mini"></u-tag>
					<u-tag text="标签" plain shape="circle" size="mini"></u-tag>
					<u-tag text="标签" plain shape="circle" size="mini"></u-tag>
					<u-tag text="标签" plain shape="circle" size="mini"></u-tag>
					<u-tag text="标签" plain shape="circle" size="mini"></u-tag>
					<u-tag text="标签" plain shape="circle" size="mini"></u-tag>
				</view>
				<view class="user-comment">
					<view class="userInfo">
						<view class="head-box">
							<u-avatar src="'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"
								shape="circle"></u-avatar>
							<view class="rate">
								<view class="nickname">大帅比</view>
								<u-rate :value="shopInfo.score" readonly size="14"></u-rate>
							</view>
						</view>
						<view class="time">
							2021.07.25
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="text">商品列表商品列表商品列表商品列表</view>
					<view class="img-box">
						<image
							src="https://img1.baidu.com/it/u=800687455,490948377&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							class="img"></image>
						<image
							src="https://img1.baidu.com/it/u=800687455,490948377&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							class="img"></image>
						<image
							src="https://img1.baidu.com/it/u=800687455,490948377&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							class="img"></image>
						<image
							src="https://img1.baidu.com/it/u=800687455,490948377&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							class="img"></image>
						<image
							src="https://img1.baidu.com/it/u=800687455,490948377&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							class="img"></image>
						<image
							src="https://img1.baidu.com/it/u=800687455,490948377&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							class="img"></image>
					</view>
					<view class="response">
						<text
							class="content">吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃吃了还想吃</text>
					</view>
				</view>
			</view>

		</view>

		<view class="shop-box" v-if="current == 2">
			<view class="shop-info">
				商家信息
			</view>
			<view class="shop-list">
				<u-icon name="bag" size="20px"></u-icon>
				<view class="info">月售{{shopInfo.sales}}份</view>
			</view>
			<view class="shop-list">
				<u-icon name="map" size="20px"></u-icon>
				<view class="info">{{shopInfo.address}}</view>
			</view>
			<view class="shop-list">
				<u-icon name="phone" size="20px"></u-icon>
				<view class="info">{{shopInfo.phone}}</view>
			</view>
			<view class="shop-list">
				<u-icon name="hourglass" size="20px"></u-icon>
				<view class="info">{{shopInfo.openTime}}</view>
			</view>
			<view class="shop-list">
				<u-icon name="car" size="20px"></u-icon>
				<view class="info">提供配送服务</view>
			</view>
			<view class="shop-list">
				<u-icon name="volume" size="20px"></u-icon>
				<view class="info">公告：今日起不给韦林波饭吃</view>
			</view>
			<view class="shop-list">
				<u-icon name="order" size="20px"></u-icon>
				<view class="info">简介：谁给他饭吃打断他的腿</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		reqSortShop,
		reqShopDishes,
		reqCartInfo,
		reqGetUserInfo,
		reqAddCart
	} from '@/common/api.js'
	export default {
		data() {
			return {
				// 是否展示选规格
				choice: false,
				// 是否显示购物车
				show: false,
				// 购物车单件商品数量 +徽标
				value1: 0,
				type: 'primary',
				// 左侧选中样式
				active: 1,
				list1: [{
						name: '点餐',
					},
					{
						name: '评价',
					},
					{
						name: '商家'
					}
				],
				// 辣度选择
				degree: [
					{
						chili: '不辣',
						checked: true
					},
					{
						chili: '微辣',
						checked: false
					},
					{
						chili: '中辣',
						checked: false
					},
					{
						chili: '特辣',
						checked: false
					}
				],
				// 分量选择
				weightList: [
					{
						weight: '小份',
						checked: true
					},
					{
						weight: '中份',
						checked: false
					},
					{
						weight: '大份',
						checked: false
					}
				],
				text: '',
				// 窗口可用高度
				wh: 0,
				// tabs索引值
				current: 0,
				// 商家id
				id: '',
				// 商家信息
				shopInfo: {},
				// 菜品
				dishList: [],
				// 选规格信息
				choiceInfo: {},
				// 用户id
				userId: '',
				
				// 辣度
				pepper: '',
				// 分量
				weight: ''
			}
		},

		methods: {
			// 选项卡
			changeIndex(info) {
				this.current = info.index
			},

			// 获取商家信息
			async getShopInfo() {
				const {
					id
				} = this
				const res = await reqSortShop(id)
				if (res.code == 200) {
					this.shopInfo = res.data
					this.text = res.data.notice
				}
			},

			// 左侧滚动条
			async changeScrollIndex(category_id) {
				this.active = category_id
				// console.log(category_id);
				const res = await reqShopDishes(category_id, this.id)
				// console.log(res);
				this.dishList = res.data
			},
			// 选规格
			showChoice(item) {
				this.choice = true
				
				this.choiceInfo = item
				console.log(this.choiceInfo);
			},
			
			// 选择辣度
			radioClick(name) {
				this.degree.map((item, index) => {
					item.checked = index === name ? true : false
				})
				if(name == 0) {
					this.pepper = "不辣"
				}else if(name == 1) {
					this.name = '微辣'
				}else if( name == 2) {
					this.name = "中辣"
				}else {
					this.name = "特辣"
				}
			},
			
			// 分量选择
			radioClick1(name) {
				this.weightList.map((item, index) => {
					item.checked = index === name ? true : false
				})
				if(name == 0) {
					this.weight = "小份"
				}else if( name == 1) {
					this.weight = "中份"
				}else {
					this.weight = "大份"
				}
			},
			
			// 修改商品数量
			async changeNum(item) {
				console.log(item);
				const cart = {
					dishesId: item.id,
					name: item.name,
					specification: this.pepper + this.weight || "",
					price: item.price,
					num: Number(item.deleted) + 1
				}
				const res = await this.reqAddCart(cart, this.id, this.userId)
				console.log(res);
			},
		},
		
		
		async onLoad(option) {
			const sysInfo = uni.getSystemInfoSync()
			// console.log(sysInfo);
			this.wh = sysInfo.windowHeight
			this.id = option.id
			this.changeScrollIndex(1)
			
			this.getShopInfo()
			
			// 获取用户信息
			const res = await reqGetUserInfo()
 			if(res.code == 200) {
				this.name = res.data.nickname
				this.userId = res.data.id
			}
			
		}
		
		
	} 
</script>

<style lang="scss">
	.store-box {
		position: relative;

		.top-placeholder {
			height: 80px;
			background-color: #2588FF;
			border-bottom-left-radius: 20%;
			border-bottom-right-radius: 20%;
		}

		.store-info {
			box-sizing: border-box;
			height: 106px;
			width: 343px;
			background-color: white;
			padding: 10px;
			position: absolute;
			top: 20px;
			left: calc((100% - 343px) / 2);
			border-radius: 20px;
			box-shadow: 2px 2px 2px #eee;

			.info {
				width: 217px;
				margin-right: 20px;

				.name {
					font-size: 24px;
				}

				.introfuce {

					color: #9098A0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.img-box {
				width: 60px;
				height: 60px;
				border-radius: 10px;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.stroe {
		display: flex;
		line-height: 34px;
	}

	.u-notice-bar {
		padding: 2px;
		height: 17px;
	}

	.tabs {
		position: absolute;
		top: 150px;
		width: calc(100% - 24px);
	}

	.scroll-view-container {
		display: flex;
		margin-top: 5px;

		// padding-bottom: 50px;
		.left-scroll-view {
			width: 160px;
			background-color: #eee;


			.left-scroll-view-item {
				line-height: 50px;
				text-align: center;
				font-size: 15px;
				color: #9098A0;

				&.active {
					background-color: #F5F5F5;
					position: relative;
					color: black;
				}
			}
		}

		.right-scroll-view {
			margin-left: 15px;

			.right-scroll-view-item {
				margin: 15px 0;
				display: flex;
				justify-content: space-between;
				.img-box {
					width: 81px;
					height: 81px;
					border-radius: 10px;
					overflow: hidden;
					margin-right: 20px;

					.img {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				.goods-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 18px;
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						.price {
							color: red;
							font-size: 16px;
						}
						
						.choose {
							position: relative;
							padding-right: 5px;
							.mode {
								background-color: #2588FF;
								border-radius: 15px;
								width: 45px;
								height: 10px;
								line-height: 10px;
								padding: 6px;
								color: white;
								font-size: 14px;
							}
							.position {
								position: absolute;
								top: -8px;
								right: 0;
							}
						}
					}
				}
			}
		}
	}

	.comments-box {
		padding: 0 12px;
		width: 100%;
		margin: 20px 0;

		.score-box {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.score-left {
				display: flex;
				align-items: center;

				.score {
					color: #2588FF;
					font-size: 35px;
					margin-right: 20px;
				}
			}

			.star-box {
				.discription {
					color: #9098A0;
				}
			}

			.distribution {
				.score2 {
					font-size: 20px;
				}

				.serve {
					color: #9098A0;
				}
			}
		}

		.tag-box {
			display: flex;
			margin: 20px 0;
			flex-wrap: wrap;
			justify-content: left;

			/deep/.u-tag {

				width: 35px;
				padding-left: 15px;
			}

			.u-transition {
				margin: 8px 10px 0 0;
			}
		}

		.userInfo {
			display: flex;
			justify-content: space-between;
			padding-right: 15px;
			align-items: center;

			.head-box {
				display: flex;
				align-items: center;

				.rate {
					margin-left: 15px;
					text-align: center;
				}
			}

			.time {
				color: #9098A0;
			}
		}

		.comment {
			padding: 10px 0;

			.img {
				margin: 5px 0;
				width: 100px;
				height: 100px;
				margin-right: 15px;
				border-radius: 10px;
				overflow: hidden;

			}

			.response {
				background-color: #dddddd;
				padding: 10px;
				border-radius: 5px;

				.content {
					display: inline-block;
					height: 50px;
					line-height: 25px;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}
			}
		}


	}

	.shop-box {
		margin-top: 120px;
		padding: 0 12px;

		.shop-info {
			margin: 10px 0;
		}

		.shop-list {
			display: flex;
			margin: 12px;

			.info {
				margin-left: 20px;
			}
		}
	}

	.pay-info {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 50px;
		display: flex;
		justify-content: center;
		color: white;

		.total-price {
			display: flex;
			background-color: #3A3635;
			width: 55%;
			border-top-left-radius: 25px;
			border-bottom-left-radius: 25px;
			padding-left: 20px;
			line-height: 50px;
			position: relative;
			
			.badge {
				position: absolute;
				left: 50px;
			}
		}

		.pay {
			background-color: #2588FF;

			width: 25%;
			border-top-right-radius: 25px;
			border-bottom-right-radius: 25px;
			text-align: center;
			line-height: 50px;
		}

		.black {
			background-color: #3A3635;
		}
	}
	
	.showChoice {
		padding: 10px;
		padding-bottom: 100px;
		.chosed {
			display: flex;
			justify-content: space-between;
		}
		.introduction {
			display: flex;
			margin: 20px 0;
			.img-box {
				width: 81px;
				height: 81px;
				border-radius: 10px;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.name-price {
				margin-left: 15px;
				.name {
					font-weight: bold;
					font-size: 16px;
					margin-bottom: 25px;
				}
				.price {
					color: red;
					font-size: 16px;
				}
			}
		}
		.numbox {
			display: flex;
			justify-content: space-between;
			margin-top: 30px;
		}
		.degree-box {
			margin: 30px 0;
			.degree-choice{
				display: flex;
				justify-content: space-evenly;
				
				/deep/.u-tag {
					border: none;
					width: 40px;
					padding-left: 20px;
					text-align: center;
				}
			}
		}
		.weight-box {
			weight {
				margin-bottom: 200px;
			}
			.weight-choice {
				display: flex;
				justify-content: space-around;
				/deep/.u-tag {
					border: none;
					width: 60px;
					padding-left: 40px;
					text-align: center;
				}
			}
		}
	}
	
	.popup-box {
		padding: 10px;

		.popup-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				display: flex;
			}
		}

		.popup-dish-item {
			margin-top: 15px;
			display: flex;

			.img-box {
				width: 81px;
				height: 81px;
				border-radius: 10px;
				overflow: hidden;
				margin-right: 10px;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.popup-right {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 80%;

				.choice {
					color: #9098A0;
					font-size: 12px;
				}

				.price-box {
					display: flex;
					justify-content: space-between;

					.price {
						color: red;
						font-size: 18px;
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		
		border: 1px solid lightgray;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #2979ff;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
